<template>
    <div class="good-rule-main">
        <van-nav-bar title="标题" left-arrow class="header-title"
            @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon"  size="20"/>
            </template>
            <template #title>
                <span class="hometitle">{{DetailObj.brand}}</span>
            </template>
        </van-nav-bar>
        <div class="good-ename">
            {{DetailObj.english_name}}
        </div>
        <div class="goodrule" :style="{background:`url(${DetailObj.picArr[0]})`}">
            <div class="goodrule-item">
                <p><span style="font-wight:bold">商品编号</span><span style="font-family: 'DINPro-Bold';">{{DetailObj.goods_sn}}</span></p>
                <p><span>产地</span>{{DetailObj.habitats}}</p>
                <p><span>配色</span>{{DetailObj.color}}</p>
                <p><span>材质</span>{{DetailObj.material}}</p>
                <p><span>款式</span>{{DetailObj.design}}</p>
                <p><span>适用性别</span>{{DetailObj.sex_model}}</p>
                <p><span>闭合方式</span>{{DetailObj.close_way}}</p>
                <p><span>上市年份</span>{{DetailObj.listing_date}}</p>

            </div>
        </div>

        <div class="page-main">
            <div class="page-title">STORY</div>
            <div class="pic-m" v-html="html_decode(DetailObj.goods_content)"></div>
            <div class="page-title">购买须知</div>
            <div class="pic-m" v-html="html_decode(ruledata.content)"></div>
        </div>


    </div>
</template>
<script>
import {_ajaxdetail,_getDocument} from '../../service/main'

export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            bg:"http://www.starrymedia.vip/public/upload/goods/2020/04-20/f437e24607a644af111d65de4323e70e.png",
            DetailObj:{},
            ruledata:{},
        }
    },
    mounted(){
        this.getDetailsData()
        this.getrule()
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1)
        },
        getrule(){
            let _this=this

            _getDocument({id:5}).then(res=>{
                if(res.errcode==1){
                    _this.ruledata=res.data
                }
            })
        },
        getDetailsData(){
            let _this=this
            let id=this.$route.query.id
            _ajaxdetail(id).then(res=>{
                if(res.errcode==0){
                    _this.OutDetail=true
                }
                res.data.picArr=[]
                res.data.picArr.push("http://"+res.data.left_img)
                // res.data.picArr.push("http://"+res.data.right_img)
                // res.data.picArr.push("http://"+res.data.front_img)
                // res.data.picArr.push("http://"+res.data.behind_img)
                // res.data.picArr.push("http://"+res.data.down_img)
                _this.DetailObj={}
                _this.DetailObj=res.data
                _this.DetailObj.is_like=res.is_like
                _this.detailtitle=res.data.brand
            })
        },
        html_decode(str) 
        { 
            var s = ""; 
            if (str.length == 0) return ""; 
            s = str.replace(/&amp;/g, "&"); 
            s = s.replace(/&lt;/g, "<"); 
            s = s.replace(/&gt;/g, ">"); 
            s = s.replace(/&nbsp;/g, " ");
            s = s.replace(/&#39;/g, "\'"); 
            s = s.replace(/&quot;/g, "\""); 
            s = s.replace(/<br\/>/g, "\n");
            s = s.replace("/public", "http://www.starrymedia.vip/public");
            return s; 
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}
.good-rule-main{
    width: 100%;
    .header-title{
        height: 8.27vh;
        line-height: 8.27vh;
        width: 100%;
        position: fixed !important;
        top: 0;
        right: 0;
        left: 0;
        z-index: 99 !important;
    }
    .good-ename{
        width: 100%;
        line-height: 3vh;
        margin-top: 8.27vh;
        text-align: center;
        border-bottom: 1px solid #efefef;
        .font-SC();
        font-weight: bolder;
    }
    .goodrule{
        width: 100%;
        height: 33vh;
        background-position: center center !important;
        /* background-size: 270px 180px !important; */
        background-size: 37.52vh !important;
        background-repeat: no-repeat !important;
        .goodrule-item{
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            padding: 2vh 4vh;
            p{
                .font-SC();
                font-size: 12px;
                color: #666;
                margin-bottom: 6px;
                font-weight: bolder;
                span{
                    display: inline-block;
                    width: 80px;
                    color: #999;
                    font-weight: normal;
                }
            }

        }
    }

    .page-main{
        width: 100%;
        height: auto;
        background-image: url('../../assets/img/good-rule-bg.png');
        background-position: center;
        background-size: cover;
        padding-bottom: 62px;
        .page-title{
            width: 100%;
            height: 64px;
            line-height: 64px;
            .font-SC();
            font-weight: 1000;
            font-size: 18px;
            color: #fff;
            text-align: center;
        }
        .pic-m{
            width: 345px;
            min-height: 200px;
            margin: 0 auto;
            padding-left: 15px;
            padding-right: 15px;
            background-color: #fff;
            /deep/img{
                width: 100%;
            }
        }

    }



}
</style>